import React from 'react'

export default class Child1 extends React.Component {
  // 如果需要在构造函数中使用props，就得在constructor中添加props这个参数
  constructor(props) {
    super(props)
    console.log('1-constructor');
    this.state = {
      msg: '我挺好的，不用担心',
      money: 100
    }
    console.log(this.state);
    console.log('===============');
  }
  // 在render前调用，必须要返回state，目的是更新state；如果返回null，就不更新state
  static getDerivedStateFromProps() {
    console.log('2-getDerivedStateFromProps');
    // 如果返回的是一个对象，就会用这个对象作为state的值去使用
    // 如果父组件中的数据变化，也会影响子组件的显示。这个是由于外部原因导致的更新
    return null
  }
  componentDidMount() {
    console.log('4-页面已经渲染成功');
    console.log('===============');
  }
  shouldComponentUpdate(newProps, newState) {
    // 组件是否要更新
    console.log('5-判断页面是否更新');
    console.log(newProps, newState);
    // 默认返回true，一般情况下返回true
    // 根据业务情况，出于性能优化的考虑，某些情况下可以返回false
    // if(newState.money-this.state.money<0.01) {
    //   return false
    // }else {
    //   return true
    // }
    return true
  }
  // 这个函数会将返回值传给componentDidUpdate，所以写了这个函数就一定要写componentDidUpdate。不常用
  getSnapshotBeforeUpdate() {
    console.log('6-页面的小的更新');
    return 666
  }
  componentDidUpdate(oldProps, oldState, arg3) {
    // oldProps, oldState是更新之前的props和state
    // 这个arg3来自getSnapshotBeforeUpdate的返回值
    console.log(oldProps, oldState);
    console.log(this.props, this.state);
    console.log(arg3);
    console.log('7-组件已经完成更新');
  }
  componentWillUnmount() {
    // 清除定时器，清除监听
    console.log('8-组件将要被卸载');
  }
  // 生命周期分为三个阶段：挂载期（初始化）-更新期-卸载期
  getMoney() {
    this.setState({
      money: this.state.money + 100
    })
  }
  render() {
    console.log('3-渲染');
    console.log(this.state);
    console.log('===============');
    // 通过解构赋值接收props中的数据
    let {age, fn1, name} = this.props;
    return (
      <div>
        <p>我是一个子组件，我来自{name}，666,我今年{age}岁</p>
        <p>{this.state.msg}</p>
        {/* 子组件接收父组件传进来的方法，调用方法时，传一个参数进去，这个参数就是子传父的数据 */}
        <button onClick={()=>this.props.fn1(this.state.msg)}>ES6</button>
        <button onClick={fn1.bind(this, this.state.msg)}>ES5</button>
        <button onClick={() => this.getMoney()}>发工资啦！</button>
        <div>我的小金库：{this.state.money}</div>
      </div>
    )
  }
}